<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>购物车</title>
    <meta name="renderer" content="webkit"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <link rel="stylesheet" href="../css/reset.css"/>
    <link rel="stylesheet" href="../css/common.css"/>
    <script src="../js/angular-1.4.6.min.js"></script>
    <script src="../js/jquery-1.8.3.min.js"></script>
    <style>
        .title{line-height: 60px;overflow: hidden;color: #666;font-size: 12px;}
        .title .fl{font-size: 18px;}
        .title .fl img{vertical-align: middle;width: 24px;margin-right: 10px;}
        .table{font-size: 12px;}
        .table ol{overflow: hidden;background-color: #eee;height: 45px;line-height: 45px;color: #666;padding: 0 25px;}
        .table ol li{float: left;text-align: center;}
        .table ol li input{margin-right: 10px;}
        .table .shop{padding: 0 25px;font-weight: bold;margin-top: 20px;margin-bottom: 10px;color: #333;}
        .table input{vertical-align: middle;}
        .table ul li{overflow: hidden;padding: 15px 25px;background-color: #fef4e8;outline: 1px solid #ddd;color: #666;margin-bottom: 8px;}
        .table ul li .td{float: left;}
        .table ul li .goods{width: 300px;margin-left: 15px;overflow: hidden;}
        .table ul li .goods img{display: block;}
        .table ul li .goods div{width: 200px;margin-left: 15px;}
        .table ul li .goods div p{color: #666;font-size: 12px;height: 40px;line-height: 20px;overflow: hidden;word-break: break-all;}
        .table ul li .goods div span{color: #666;}
        .table ul li .color{width: 140px;padding: 0 10px;text-align: center;}
        .table ul li .unit-price{width: 140px;padding: 0 10px;text-align: center;color: #333;}
        .table ul li .num{width: 140px;padding: 0 10px;text-align: center;}
        .table ul li .num div{display: inline-block;width: 90px;height: 22px;border: 1px solid #ccc;overflow: hidden;vertical-align: middle;}
        .table ul li .num div span{float: left;display: inline-block;line-height: 22px;font-family: "宋体";cursor: pointer;
            font-size: 20px;width: 28px;text-align: center;font-weight: bold;background-color: #fff;}
        .table ul li .num div input{width: 32px;float: left;height: 22px;border: solid #ccc;border-width: 0 1px;text-align: center;}
        .table ul li .num p{font-size: 12px;margin-top: 5px;}

        .table ul li .total-price{width: 140px;padding: 0 10px;text-align: center;color: #d94b87;font-weight: bold;font-size: 14px;}
        .table ul li .control{width: 140px;padding: 0 10px;text-align: center;}
        .table ul li .control a{color: #666;display: inline-block;margin-bottom: 5px;}
        .bottom-control{height: 50px;line-height: 50px;outline: 1px solid #ddd;margin-top: 25px;}
        .bottom-control .left{padding-left: 25px;color: #333;}
        .bottom-control .left a{display: inline-block;color: #666;margin-left: 25px;}
        .bottom-control .right .choose{color: #333;margin-right: 30px;}
        .bottom-control .right .choose span{color: #ef1569;font-size: 16px;display: inline-block;padding: 0 5px;}
        .bottom-control .right .saving{color: #999;}
        .bottom-control .right .saving span{color: #333;margin-right: 30px;}
        .bottom-control .right .total{color: #999;margin-right: 20px;}
        .bottom-control .right .total span{color: #ec4f92;font-size: 16px;font-weight: bold;}
        .bottom-control .right .go{background-color: #ec4f92;width: 110px;text-align: center;height: 50px;line-height: 50px;color: #fff;
            font-size: 16px;}

        .like{margin-top: 50px;margin-bottom: 50px;}
        .like .title{overflow: hidden;border-bottom: 1px solid #ec4f92;}
        .like .title ul{overflow: hidden;border-top: 1px solid #ddd;border-left: 1px solid #ddd;}
        .like .title ul li{float: left;width: 125px;height: 30px;line-height: 30px;text-align: center;font-size: 14px;color: #333;
            border-right: 1px solid #ddd;cursor: pointer;}
        .like .title ul .active{color: #ffffff;background-color: #ec4f92;}
        .like .title .fr{line-height: 30px;font-size: 14px;}
        .like .title .fr span{color: #ec4f92;}
        .like table{margin-top: 20px;border-collapse: collapse;width: 100%;}
        .like table td{width: 16.6666%;border: 1px solid #ddd;padding: 10px 0;}
        .like table td a{width: 180px;display: block;margin: 0 auto;font-size: 14px;}
        .like table td a img{display: block;}
        .like table td a .price{margin-top: 5px;color: #ec4f92;text-align: center;}
        .like table td a .des{height: 36px;line-height: 18px;overflow: hidden;word-break: break-all;font-size: 12px;margin-top: 5px;color: #666;}
        .like table td a .overflow{margin-top: 10px;}
        .like table td a .overflow .fl{color: #0062a6;}
        .like table td a .overflow .fr{color: #999;font-size: 12px;}
    </style>
</head>
<body ng-app="">
<div ng-include="'../public/header.html'"></div>

<div class="container">
    <div class="title">
        <div class="fl"><img src="../img/cart(2).png" alt=""/>购物车（<span class="red">3</span>）</div>
        <div class="fr">配送至：
            <select name="" id="">
                <option value="">贵州毕节</option>
                <option value="">贵州毕节</option>
                <option value="">贵州毕节</option>
                <option value="">贵州毕节</option>
                <option value="">贵州毕节</option>
            </select>
        </div>
    </div>
    <div class="table">
        <ol>
            <li><input type="checkbox"/>全选</li>
            <li style="width: 280px;">商品</li>
            <li style="width: 160px;">属性</li>
            <li style="width: 160px;">单价（元）</li>
            <li style="width: 160px;">数量</li>
            <li style="width: 160px;">小计（元）</li>
            <li style="width: 160px;">操作</li>
        </ol>
        <div class="shop"><input type="checkbox"/>&nbsp;&nbsp;商创自营</div>
        <ul>
            <li>
                <div class="td checkbox"><input type="checkbox"/></div>
                <div class="td goods">
                    <img class="fl" src="../img/QQ截图20160727105143.png" width="80" height="80"/>
                    <div class="fl">
                        <p>爱他美Aptamil 幼儿配方奶粉3段800g（原装进口 罐）12-36个月爱他美Aptamil 幼儿配方奶粉3段800g（原装进口 罐）12-36个月</p>
                        <span>800g（原装进口 罐）12-36个月</span>
                    </div>
                </div>
                <div class="td color">颜色：米色</div>
                <div class="td unit-price">￥88.00</div>
                <div class="td num">
                    <div>
                        <span>-</span>
                        <input type="text" value="1"/>
                        <span>+</span>
                    </div>
                    <p>有货</p>
                </div>
                <div class="td total-price">￥88.00</div>
                <div class="td control">
                    <a href="">删除</a>
                    <br/>
                    <a href="">移到我的收藏夹</a>
                </div>
            </li>
            <li>
                <div class="td checkbox"><input type="checkbox"/></div>
                <div class="td goods">
                    <img class="fl" src="../img/QQ截图20160727105143.png" width="80" height="80"/>
                    <div class="fl">
                        <p>爱他美Aptamil 幼儿配方奶粉3段800g（原装进口 罐）12-36个月爱他美Aptamil 幼儿配方奶粉3段800g（原装进口 罐）12-36个月</p>
                        <span>800g（原装进口 罐）12-36个月</span>
                    </div>
                </div>
                <div class="td color">颜色：米色</div>
                <div class="td unit-price">￥88.00</div>
                <div class="td num">
                    <div>
                        <span>-</span>
                        <input type="text" value="1"/>
                        <span>+</span>
                    </div>
                    <p>有货</p>
                </div>
                <div class="td total-price">￥88.00</div>
                <div class="td control">
                    <a href="">删除</a>
                    <br/>
                    <a href="">移到我的收藏夹</a>
                </div>
            </li>
            <li>
                <div class="td checkbox"><input type="checkbox"/></div>
                <div class="td goods">
                    <img class="fl" src="../img/QQ截图20160727105143.png" width="80" height="80"/>
                    <div class="fl">
                        <p>爱他美Aptamil 幼儿配方奶粉3段800g（原装进口 罐）12-36个月爱他美Aptamil 幼儿配方奶粉3段800g（原装进口 罐）12-36个月</p>
                        <span>800g（原装进口 罐）12-36个月</span>
                    </div>
                </div>
                <div class="td color">颜色：米色</div>
                <div class="td unit-price">￥88.00</div>
                <div class="td num">
                    <div>
                        <span>-</span>
                        <input type="text" value="1"/>
                        <span>+</span>
                    </div>
                    <p>有货</p>
                </div>
                <div class="td total-price">￥88.00</div>
                <div class="td control">
                    <a href="">删除</a>
                    <br/>
                    <a href="">移到我的收藏夹</a>
                </div>
            </li>
        </ul>
        <div class="bottom-control clear">
            <div class="left fl clear">
                <label class="fl">
                    <input type="checkbox"/>&nbsp;全选
                </label>
                <a class="fl" href="javascript:;">删除选中的商品</a>
                <a class="fl" href="javascript:;">移到我的收藏</a>
            </div>
            <div class="right fr">
                <div class="choose fl">已选择<span>3</span>件商品</div>
                <div class="saving fl">已节省：<span>￥12.00</span></div>
                <div class="total fl">总价(不含运费)：<span>￥100.00</span></div>
                <div class="go fr">去结算</div>
            </div>
        </div>
    </div>
    <div class="like">
        <div class="title">
            <ul class="fl">
                <li class="active">最近浏览</li>
                <li>猜你喜欢</li>
                <li>掌柜推荐</li>
            </ul>
            <div class="fr">
                <span>1</span>/1
            </div>
        </div>
        <table border="0" cellpadding="0" cellspacing="0">
            <tr>
                <td>
                    <a href="">
                        <img src="../img/QQ截图20160801165340.png" alt="" width="180" height="180"/>
                        <div class="price">￥12.00</div>
                        <p class="des">爱他美Aptamil 幼儿配方奶粉3段800g（原装进口 罐）12-36个月 爱他美Aptamil 幼儿配方奶粉3段800g（原装进口 罐）12-36个月</p>
                        <div class="overflow">
                            <div class="fl">汇婴网自营</div>
                            <div class="fr">销量：0</div>
                        </div>
                    </a>
                </td>
                <td>
                    <a href="">
                        <img src="../img/QQ截图20160801165340.png" alt="" width="180" height="180"/>
                        <div class="price">￥12.00</div>
                        <p class="des">爱他美Aptamil 幼儿配方奶粉3段800g（原装进口 罐）12-36个月 爱他美Aptamil 幼儿配方奶粉3段800g（原装进口 罐）12-36个月</p>
                        <div class="overflow">
                            <div class="fl">汇婴网自营</div>
                            <div class="fr">销量：0</div>
                        </div>
                    </a>
                </td>
                <td>
                    <a href="">
                        <img src="../img/QQ截图20160801165340.png" alt="" width="180" height="180"/>
                        <div class="price">￥12.00</div>
                        <p class="des">爱他美Aptamil 幼儿配方奶粉3段800g（原装进口 罐）12-36个月 爱他美Aptamil 幼儿配方奶粉3段800g（原装进口 罐）12-36个月</p>
                        <div class="overflow">
                            <div class="fl">汇婴网自营</div>
                            <div class="fr">销量：0</div>
                        </div>
                    </a>
                </td>
                <td>
                    <a href="">
                        <img src="../img/QQ截图20160801165340.png" alt="" width="180" height="180"/>
                        <div class="price">￥12.00</div>
                        <p class="des">爱他美Aptamil 幼儿配方奶粉3段800g（原装进口 罐）12-36个月 爱他美Aptamil 幼儿配方奶粉3段800g（原装进口 罐）12-36个月</p>
                        <div class="overflow">
                            <div class="fl">汇婴网自营</div>
                            <div class="fr">销量：0</div>
                        </div>
                    </a>
                </td>
                <td>
                    <a href="">
                        <img src="../img/QQ截图20160801165340.png" alt="" width="180" height="180"/>
                        <div class="price">￥12.00</div>
                        <p class="des">爱他美Aptamil 幼儿配方奶粉3段800g（原装进口 罐）12-36个月 爱他美Aptamil 幼儿配方奶粉3段800g（原装进口 罐）12-36个月</p>
                        <div class="overflow">
                            <div class="fl">汇婴网自营</div>
                            <div class="fr">销量：0</div>
                        </div>
                    </a>
                </td>
                <td>
                    <a href="">
                        <img src="../img/QQ截图20160801165340.png" alt="" width="180" height="180"/>
                        <div class="price">￥12.00</div>
                        <p class="des">爱他美Aptamil 幼儿配方奶粉3段800g（原装进口 罐）12-36个月 爱他美Aptamil 幼儿配方奶粉3段800g（原装进口 罐）12-36个月</p>
                        <div class="overflow">
                            <div class="fl">汇婴网自营</div>
                            <div class="fr">销量：0</div>
                        </div>
                    </a>
                </td>
            </tr>
        </table>
    </div>
</div>

<div ng-include="'../public/footer2.html'"></div>
</body>
<script>
    $(function(){
        $('.like .title ul li').click(function(){
            $(this).addClass('active').siblings().removeClass('active');
        })
    })
</script>
</html>